<template>
  <div class="echart" ref="echartMap"></div>
</template>

<script>
import JSON from '/static/map/json/world.json';
import {mapGetters} from 'vuex'
import {sectionRandom} from '@/utils'

let lists = []
let mapCharts = null
export default {
  props: {},
  computed: {
    ...mapGetters(['wsAppData'])
  },
  data() {
    return {
      planePath: 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'
    }
  },
  watch: {
    wsAppData(val) {
      // console.log(val.data)
      return false
      let data = []
      if (!lists.length) {
        data.push({
          point: ['六安', '马鞍山'],
          coords: [
            [116.50, 31.75],
            [119.50, 31.75]
          ],
        })
      } else {
        data.push({
          point: ['六安', '马鞍山'],
          coords: [
            lists.at(-1).coords[1],
            [lists.at(-1).coords[1][0] + sectionRandom(-0.002, 0.01), lists.at(-1).coords[1][1] + sectionRandom(-0.002, 0.01)]
          ],
        })
      }
      lists.push(data[0])
      this.setDatas(data)
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
    window.addEventListener("resize", function () {
      mapCharts.resize();
    });

    setInterval(() => {
      let data = []
      if (!lists.length) {
        data.push({
          coords: [
            [116.50, 31.75],
            [119.50, 31.75]
          ],
        })
      } else {
        data.push({
          coords: [
            lists.at(-1).coords[1],
            [lists.at(-1).coords[1][0] + sectionRandom(-0.002, 0.01), lists.at(-1).coords[1][1] + sectionRandom(-0.002, 0.01)]
          ],
        })
      }
      lists.push(data[0])
      this.setDatas(data, {
        name: '六安',
        value: [116.50, 31.75]
      })
    }, 1000)

  },
  methods: {
    initChart() {
      this.$echarts.registerMap('world', JSON, {});
      mapCharts = this.$echarts.init(this.$refs.echartMap);
      this.setOptions()
    },
    setOptions() {
      if (!mapCharts) {
        return false
      }
      mapCharts.setOption({
        tooltip: {
          trigger: 'item',
          renderMode: 'html',
          // 触发方式
          triggerOn: 'mousemove', // 'mousemove|click'
          enterable: true,
          backgroundColor: '#fff',
          padding: 0,
          textStyle: {
            color: '#000',
            fontSize: '12'
          },
          extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
        },
        dispatchAction: {
          type: 'downplay'
        },
        roamController: {
          show: true,
          x: 'right',
          mapTypeControl: {
            china: true
          }
        },
        geo: {
          show: true,
          map: 'world',
          type: 'map',
          mapType: 'world',
          roam: true,
          boundingCoords: [
            // 定位左上角经纬度
            [-180, 90],
            // 定位右下角经纬度
            [180, -90]
          ],
          label: {
            normal: {
              // 显示省份标签
              show: false,
              textStyle: {
                color: '#fff',
                fontSize: 10
              }
            },
            emphasis: {
              // 对应的鼠标悬浮效果
              show: false,
              // 选中后的字体样式
              textStyle: {
                color: '#000',
                fontSize: 14
              }
            }
          },
          itemStyle: {
            color: '#fff',
            normal: {
              areaColor: 'rgba(0,0,0,0.5)',
              borderColor: '#8abcd1',
              borderWidth: 1
            },
            emphasis: {
              borderWidth: 0.5,
              borderColor: '#8abcd1',
              areaColor: 'rgba(0,0,0,0.2)'
            }
          },
          emphasis: {
            label: {
              show: false
            }
          }
        },
        series: [
          {
            name: "",
            type: "lines",
            zlevel: 6,
            polyline: false,
            lineStyle: {
              type: 'solid',
              width: 1,
              opacity: 1,
              curveness: 0,
              orient: 'horizontal',
              color: "#000",
            },
            show: true,
            data: [],
            tooltip: {
              position: "right",
              color: "#000",
              formatter(d) {
                console.log(d)
                return `<div style="padding: 5px 10px;"> 【${d.data.coords[0]}】< ---- >【${d.data.coords[1]}】</div>`;
              }
            }
          }
        ]
      });
    },
    setDatas(data, markPoints) {
      if (!mapCharts) {
        return false
      }
      mapCharts.appendData({
        seriesIndex: 0,
        data: data,
      });
    }
  },
};
</script>

<style lang="less" scoped>
  .echart {
    width: 100%;
    height: 100%;
  }
</style>